<template>
  <van-nav-bar
      title="个人资料"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
    <div class="profile-container">
      <div class="profile-container">
        <span class="edit-text">修改头像</span>
      </div>
      <img :src="user.imageUrl" alt="Avatar" class="avatar" />
    </div>
  <div class="profile-container">
      <div class="edit-text">修改昵称</div>
      <div>
       <input type="text" v-model="user.username">
      </div>
  </div>
  <div class="profile-container">
      <div class="edit-text">设置性别</div>
        <van-radio-group v-model="user.sex" direction="horizontal">
          <van-radio name="1" :user.sex="user.sex === '1'">男</van-radio>
          <van-radio name="2" :user.sex="user.sex === '2'">女</van-radio>
        </van-radio-group>

  </div>
  <div class="profile-container">
    <div class="profile-container">
      <div class="edit-text">所在地区</div>
    </div>
    <div>
      <van-field
          v-model="user.addr"
          is-link
          readonly
          name="area"
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showArea = true"
      />
      <van-popup v-model:show="showArea" position="bottom">
        <van-area
            :area-list="areaList"
            @confirm="onConfirm1"
            @cancel="showArea = false"
        />
      </van-popup>

    </div>
  </div>
  <div class="profile-container">
      <div class="edit-text">本科院校</div>
      <div>
        <span>{{user.school}}</span>
      </div>
  </div>
  <div class="profile-container">
      <div class="edit-text">本科专业</div>
      <div>
        <span>{{user.major}}</span>
      </div>
  </div>
  <div class="profile-container">
      <div class="edit-text">考研年份</div>
    <div>
      <van-field
          v-model="user.keyTime"
          is-link
          readonly
          name="datePicker"
          label="时间选择"
          placeholder="点击选择时间"
          @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" position="bottom">
        <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
      </van-popup>
    </div>
  </div>
  <div class="profile-container">
      <div class="edit-text">报考院校</div>
      <div>
        <span>{{user.universities}}</span>
      </div>
  </div>
  <div class="profile-container">
      <div class="edit-text">个性签名</div>
      <div>
        <van-cell-group inset>
          <van-field
              v-model="user.autograph"
              rows="2"
              autosize
              type="textarea"
              maxlength="50"
              placeholder="在此处请请输入个性签名"
              show-word-limit
          />
        </van-cell-group>
      </div>
  </div>
  <van-button type="primary" block @click="save">保存</van-button>
</template>

<script setup>
import {useRouter} from "vue-router";
const router = useRouter();
import { areaList } from '@vant/area-data';
import {ref, onMounted} from "vue";
import axios from "axios";
import {showToast} from "vant";
import {get} from "../../util/request.js";
const showArea = ref(false);
const onConfirm1 = ({ selectedOptions }) => {
  showArea.value = false;
  user.value.addr = selectedOptions.map((item) => item.text).join('/');
};
const onClickLeft = () => {
  router.push("/systemSettings");
  // 返回按钮逻辑
};
const show = ref(false);
const showPicker = ref(false);
const onConfirm = ({ selectedValues }) => {
  user.value.keyTime = selectedValues.join('-');
  showPicker.value = false;
};
const user = ref(
  {
    id:'',
    imageUrl:'',
    username:'',
    sex:'',
    school:'',
    major:'',
    addr:'',
    universities:'',
    keyTime:'',
    autograph:'',
  }
)
onMounted(async () => {
  get(
    'user/findById'
  ).then(
      (data) => {
        if (data.code == 0) {
          showToast("查询成功");
          user.value = data.data;// 初始化界面
        } else {
          showToast("查询失败");
        }
      })
      .catch(
          function () {
            alert("服务器错误")
          }
      )
})
const save = () => {
  axios({
    method: 'post', // post  get
    url: 'http://localhost:8081/api/user/save',
    data: user.value
  }).then(
      (data) => {
        if (data.data.code == 0) {
          showToast("修改成功");
          user.value = data.data.data;// 初始化界面
          //刷新页面
          window.location.reload();
        } else {
          showToast("修改失败");
        }
      })
      .catch(
          function () {
            alert("服务器错误")
          }
      )
}
</script>

<style scoped>
.profile-container {
  display: flex;
  align-items: center;
}

.edit-text {
  flex: 1; /* 占据剩余空间 */
  font-size: 14px;
  font-weight: bold;
  margin-right: 240px; /* 右边距 */
  margin-left: 20px;
}
.profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

</style>